<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('阀门数据')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <input type="hidden" id="locationId" name="locationId" th:value="${location.locationId}">
                <div class="select-list">
                    <ul>

                        <li>
                            <label>阀门ID：</label>
                            <input type="text" name="valveId" id="valveId" th:value="${valveId}"/>
                        </li>
                        <li>
                            <label>采集器ID：</label>
                            <input type="text" name="collectorId" id="collectorId" th:value="${collectorId}"/>
                        </li>
                        <li class="select-time">
                            <label>采集时间：</label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                        </li>
                        <li>
                            <label>上线状态：</label>
                            <select id="onlineStatus" name="onlineStatus">
                                <option value="">所有</option>
                                <option value="0">离线</option>
                                <option value="1">上线</option>
                            </select>
                        </li>
                        <li>
                            <label>供暖标志：</label>
                            <select id="heatStatus" name="heatStatus">
                                <option value="">所有</option>
                                <option value="0">非供暖标志</option>
                                <option value="1">供暖季标志</option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" id="check" onclick="check()" shiro:hasPermission="data:valve:check">
                <i class="fa fa-plus"></i> 数据采集
            </a>
            <a class="btn btn-success" id="detail" onclick="detail()" >
                <i class="fa fa-plus"></i> 图表分析
            </a>
            <a class="btn btn-success" onclick="aperture()" shiro:hasPermission="data:valve:aperture">
                <i class="fa fa-edit"></i> 阀门开度
            </a>
        </div>
        <div class="col-sm-12 select-table table-bordered">
            <table id="bootstrap-table" data-auto-refresh="true" data-auto-refresh-interval="60" data-show-print="true"></table>
        </div>

    </div>

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: ztree-js" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: bootstrap-table-export-js" />
<th:block th:include="include :: bootstrap-table-auto-refresh-js" />
<th:block th:include="include :: bootstrap-table-print-js" />
<script th:inline="javascript">
    var prefix = ctx + "data/valve/";

    $(function() {
        var options = {
            url: prefix + "/list",
            modalName: "阀门数据",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            showExport: true,
            sortName: "createTime",
            sortOrder: "desc",
            columns: [
                {
                    field: 'id',
                    title: '主键id',
                    visible: false
                },
                {
                    field: 'location.locationName',
                    title: '地址全称',
                    sortable: true
                },
                {
                    field: 'valveId',
                    title: '阀门ID',
                    formatter: function(value, row, index) {
                        return '<a href="javascript:void(0)" onclick="detail(\'' + row.valveId + '\')">' + value + '</a>';
                    }
                },
                {
                    field: 'collectorId',
                    title: '采集器ID'

                },
                {
                    field: 'max',
                    title: '温度上限'
                },
                {
                    field: 'min',
                    title: '温度下限'
                },
                {
                    field: 'temp',
                    title: '设置温度'
                },

                {
                    field: 'indoor',
                    title: '室内温度'
                },
                {
                    field: 'workTime',
                    title: '工作时间'
                },
                {
                    field: 'aperture',
                    title: '阀门开度'
                },
                {
                    field: 'tempmax',
                    title: '阀控温上限值'
                },
                {
                    field: 'aperturemax',
                    title: '阀开度上限'
                },
                {
                    field: 'aperturemin',
                    title: '阀开度下限'
                },
                {
                    field: 'onlineStatus',
                    title: '在线状态',
                    sortable: true,
                    formatter: function(value, item, index) {
                        if (item.onlineStatus == '1') {
                            return '<span class="label label-success">在线</span>';
                        }
                        else {
                            return '<span class="label label-danger">离线</span>';
                        }
                    }
                },
                {
                    field: 'outlet',
                    title: '设置回水温度'
                },
                {
                    field: 'heatStatus',
                    title: '供暖标志',
                    sortable: true,
                    formatter: function(value, item, index) {
                        if (item.heatStatus == '1') {
                            return '<span class="label label-success">供暖季标志</span>';
                        }
                        else {
                            return '<span class="label label-danger">非供暖标志</span>';
                        }
                    }
                },
                {
                    field: 'outletStatus',
                    title: '回水温度使能标志',
                    sortable: true,
                    formatter: function(value, item, index) {
                        if (item.outletStatus == '1') {
                            return '<span class="label label-success">回水温度使能打开</span>';
                        }
                        else {
                            return '<span class="label label-danger">回水温度使能关闭</span>';
                        }
                    }
                },

                {
                    field: 'createTime',
                    title: '采集时间'
                }]
        };
        $.table.init(options);
    });
    function queryParams(params) {
        var search = $.table.queryParams(params);
        search.locationId = $("#locationId").val();
        return search;
    }


    function queryLocationTree()
    {
        var url = ctx + "base/location/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#locationId").val(treeNode.id);
            $.table.search();
        }
    }

    $('#btnExpand').click(function() {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function() {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function() {
        queryLocationTree();
    });

    /**
     * 阀门数据采集
     */
    function check(){
        var valveId = $("#valveId").val();
        $.operate.post(prefix + "/check", { "valveId": valveId });
    }
    /* 数据展示 */
    function detail() {
        var valveId = $("#valveId").val();
        var url = ctx + 'report/valve/' + valveId;
        $.modal.openTab("阀门数据展示", url);
    }

    /* 设定阀门开度 */
    function aperture(){
        var valveId = $("#valveId").val();
        var url = ctx + 'base/valve/info/aperture/' +  valveId;
        $.modal.open("设置阀门开度", url, '800', '300');
    }
</script>
</body>
</html>